<template>
    <div>
        <div>
            <el-table
                    :data="Employees"
                    border
                    stripe
                    v-loading="loading"
                    element-loading-text="数据加载中..."
                    size="small"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        width="120"
                        prop="name"
                        label="员工姓名">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="email"
                        label="电子邮箱">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="120">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="specialty"
                        label="专业">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="school"
                        label="毕业院校">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="beginContract"
                        label="合同开始日期">
                </el-table-column>
                <el-table-column
                        width="120"
                        prop="department.name"
                        label="部门名称">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="170"
                        label="工资账套">
                    <template slot-scope="scope">
                        <el-popover
                                placement="right"
                                width="220"
                                size="small"
                                trigger="hover">
                            <el-card class="box-card">
                                <div v-for="(value,key,index) in scope.row.salary" :key="index" class="text item" v-show="key!='id'&&key!='createDate'">
                                    {{salaryParms[index]}}:{{value}}
                                </div>
                            </el-card>
                            <el-tag slot="reference" type="warning" v-if="scope.row.salary">{{scope.row.salary.name}}</el-tag>
                            <el-tag slot="reference" type="warning" v-else>未设置账套</el-tag>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="160"
                        label="操作">
                    <template slot-scope="scope">
<!--                        <el-button  size="mini" @click="showEidtSalarySob(scope.row)" type="success" >修改工资账套</el-button>-->
                        <el-dropdown size="small" split-button type="primary" trigger="click">
                            修改工资账套
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                        v-for="(item,index) in salaries"
                                        :key="index"
                                        @click.native="editSalaryWithEmployee(scope.row,item)">
                                    {{item.name}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: center;margin-top: 10px">
                <el-pagination
                        background
                        @prev-click="prevClick"
                        @next-click="nextClick"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "SalSobCfg",
        data(){
            return{
                loading: false,
                total:10,
                pageNo: 1,
                pageSize: 10,
                dialogVisible:false,
                Employees:[],
                salaryParms:[
                    '主键',
                    '基本工资',
                    '午餐补助',
                    '交通补助',
                    '应发工资',
                    '养老金基金',
                    '养老金比率',
                    '创建时间',
                    '医疗保险基金',
                    '医疗保险比率',
                    '公积金基金',
                    '公积金比率',
                    '账套名称'
                ],
                salaries:[]
            }
        },
        mounted() {
            this.getEmployeeByPageWithSalary();
            this.getSalaries();
        },
        methods:{
            editSalaryWithEmployee(data, salary) {
                this.loading = true;
                this.putRequest("/salary/sobcfg/?employeeId=" + data.id + "&salaryId=" + salary.id).then(resp => {
                    this.loading = false;
                    this.getEmployeeByPageWithSalary();
                })
            },
            getSalaries(){
                this.loading = true;
                this.getRequest("/salary/sobcfg/getallsalaries/").then(resp=>{
                    this.loading = false;
                    if(resp){
                        this.salaries = resp;
                    }
                })
            },
            getEmployeeByPageWithSalary(){
                this.loading = true;
                this.getRequest("/salary/sobcfg/?pageNo="+ this.pageNo + "&pageSize=" + this.pageSize ).then(resp=>{
                    this.loading = false;
                    if(resp){
                        this.Employees = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            //点击下一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            nextClick(currentPage) {
                this.pageNo = currentPage;
                this.getEmployeeByPageWithSalary();
            },
            //点击上一页时的时候触发的函数，将页码改变，然后传参去后端获取数据
            prevClick(currentPage) {
                this.pageNo = currentPage;
                this.getEmployeeByPageWithSalary();
            },
            //点击页码的时候触发的函数，将页码改变，然后传参去后端获取数据
            currentChange(currentPage) {
                this.pageNo = currentPage;
                this.getEmployeeByPageWithSalary();
            },
            //点击页数的时候触发的函数，将页数改变，然后传参去后端获取数据
            sizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getEmployeeByPageWithSalary();
            }
        }
    }
</script>

<style>
    body .el-table th.gutter {
        display: table-cell !important
    }
</style>
